<!-- 自动生成:声明页面使用 Java 语言，同时指定页面的编码为 UTF-8，以保证中文等字符的正确显示和解析。 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title>用户注册界面</title>
		
		<script language="javascript">
			///================辅助函数===================
			// 根据不同的浏览器，创建相对应的XMLRequest对象,通过该对象发送请求
			function getXMLHTTPRequest(){
				var xRequest=null;//使用var声明变量
				if (window.XMLHttpRequest){
					xRequest=new XMLHttpRequest();
				}else if(window.ActiveXObject){
					xRequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				return xRequest;
			}
			
			
			//发送请求
			function sendRequest(req, url, params, HttpMethod){
				req.open(HttpMethod,url,true);//初始化请求参数
				// 在 POST 方法时设置HTTP头
				if (HttpMethod.toLowerCase() === "post") {
				    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				}
				req.send(params);
			}
			
			
			//===============验证用户名的入口函数===================
			var xmlhttp;//声明全局xmlhttprequest对象
			
			function checkusername(){
				var formUserMassage=document.usermassage;//获取表单的信息
				var username = formUserMassage.username.value;//定位到表单中的username获取其value值
				
				if(username==""){
					us.textContent = "用户名称不能为空";;//内置函数，用于在浏览器中弹出一个包含指定消息的对话框
					return false;
				}else{
					doCheckUserName("CheckUserServlet","username="+username,"post");//传入参数
				}
			}
			
			function doCheckUserName(url,params,method){
				xmlhttp =getXMLHTTPRequest();//创建对象
				
				//每次请求状态发生变化，就调用一次processResponse函数
				xmlhttp.onreadystatechange = processResponse;
				
				//发送请求
			    sendRequest(xmlhttp,url, params, method);
			}
			
			function processResponse(){
				if (xmlhttp.readyState==4 && xmlhttp.status==200){//接收到结果
					//xmlhttp.responseText：表示从服务器接收到的响应数据（以字符串形式返回），trim去除空格
					if(xmlhttp.responseText.trim()=="false"){
						us.textContent = "用户名格式正确";
					}else{
						us.textContent = "已有该用户";
					}
				}
			}
			//=======================验证密码======================
			function checkpassword_1(){
				var formpasswordMassage=document.usermassage;//获取表单的信息
				var password=formpasswordMassage.password_1.value;
				//统计个数
				var totalLength=password.length;
				var numberCount = password.match(/\d/g) ? password.match(/\d/g).length : 0;
				var letterCount = password.match(/[a-zA-Z]/g) ? password.match(/[a-zA-Z]/g).length : 0;
				
				if (totalLength>=6){
					if(numberCount!=0 && letterCount!=0){
						pw1.textContent = "密码格式正确";
						return true;
					}
				}else{
					pw1.textContent = "密码格式不正确";
					return false;
				}
			}
			function checkpassword_2(){
				var formpasswordMassage=document.usermassage;//获取表单的信息
				var password2_value=formpasswordMassage.password_2.value;
				var password1_value=formpasswordMassage.password_1.value;
				
				if (password1_value==password2_value){
					pw2.textContent = "两次输入的密码一致";
					return true;
				}else{
					pw2.textContent = "两次输入的密码不一致";
					return false;
				}
				
				
				
				
			}
			//==================注册===================
			function handleregister(){

				if(document.getElementById("us").textContent == "用户名格式正确"){
					if(checkpassword_2()&&checkpassword_1()){//两次密码格式都正确
					var formTotalMassage=document.usermassage;//获取表单的信息
						if (formTotalMassage.password_1.value===formTotalMassage.password_2.value){
							alert("注册成功");
						}
					}
				}else{
					alert("注册失败");
				}
				
			}
		
		</script>
	
	
	</head>
	
	<body>
		 <form name="usermassage"  method="post">
			<!-- ==========输入部分========= --> 
			<label>用户名</label>
			<input type="text" name="username" value="" onkeyup="checkusername()" />
			<span id=us ></span><br/>
			<label>登录密码</label>
			<input type="password" name="password_1" value="" onkeyup="checkpassword_1()"/>
			<span id=pw1 ></span><br/>
			<label>确认登录密码</label>
			<input type="password" name="password_2" value="" onkeyup="checkpassword_2()"/>
			<span id=pw2 ></span><br/>
			<!-- =============注册按钮========== -->
			<input type="button" value="注册" onclick="handleregister()" >
		</form>
		
	
	</body>
</html>